<!DOCTYPE html>

<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/layui/js/jquery-3.4.1.min.js}" charset="utf-8"></script>
</head>

<body>
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div id="hidd"></div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" id=""><i style="color: red;">*</i>&nbsp;&nbsp;姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="username"  autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" id="login"><i style="color: red;">*</i>&nbsp;&nbsp;密码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="password"  autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><i style="color: red;">*</i>&nbsp;&nbsp;年龄:</label>
                <div class="layui-input-inline">
                    <input type="text" id="dept" name="age"  autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="1" title="男" checked="">
                    <input type="radio" name="gender" value="0" title="女">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><i style="color: red;">*</i>&nbsp;&nbsp;地址:</label>
                <div class="layui-input-inline">
                    <select class="layui-checkbox" id="add" name="Address.addid"  style="width:150px" lay-verify="required">
                        <option value="">请选择</option>
                        <option th:each="addres:${addresses}" th:value="${addres.addid}" th:text="${addres.province}+':'+${addres.city}+':'+${addres.street}"></option>
                    </select>
                </div>
            </div>

        </div>
        <div class="layui-form-item" style="padding-left: 25%;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->

<!-- 车辆信息的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrCarDiv">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>车辆信息</legend>
    </fieldset>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15" id="carid"></div>
    </div>
</div>
<!-- 车辆信息的弹出层结束 -->


<!-- 数据表格开始 -->
<table class="layui-hide" style="margin: 100PX;" id="test" lay-filter="test"></table>
<div id="laypage" ></div>
<div style="display: none" id="userTool">
    <button class="layui-btn layui-btn-sm" lay-event="deletes">批量删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="export">添加信息</button>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 数据表格结束 -->
<script>
    layui.use(['element', 'jquery','laydate','form','table','laypage','layer','upload'], function(){
        var $ = layui.jquery;
        var element = layui.element;
        var laydate=layui.laydate;
        var form = layui.form;
        var table = layui.table;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var tableIns;
        layui.use('table', function () {
            tableIns = table.render({
                elem: '#test'
                ,url:'selectEmployee'
                ,id: 'indent'
                ,defaultToolbar:['']
                ,method:'GET'
                ,toolbar: '#userTool' //开启头部工具栏，并为其绑定左侧模板
                ,cols: [ [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID'}
                    ,{field:'username', title:'姓名'}
                    ,{field:'age', title:'年龄'}
                    ,{field:'gender', title:'性别',templet:function(d){
                            if(d.gender==0){
                                return '女'
                            }else{
                                return '男'
                            }
                        }}
                    ,{field:'address', title:'住址',templet:'<div>{{ d.address.province}}:{{ d.address.city}}:{{ d.address.street}}</div>'}
                    ,{field:'carCount', title:'车辆信息（辆）',event:'viewReport',templet:'<div><span>{{ d.carCount}}辆</span>&nbsp;&nbsp;&nbsp;&nbsp;<p class="layui-btn layui-btn-xs">查看详情</p> </div>'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width:200}
                ] ]
                ,page: true //是否显示分页
                ,limits: [5,10, 15, 20]
                ,limit: 5 //每页默认显示的数量
                ,done: function(res, curr, count) { //表格数据加载完后的事件
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);
                    //得到当前页码
                    console.log(curr);
                    //得到数据总量
                    console.log(count);
                }
            });
        });
        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            switch(obj.event){
                //批量删除
                case 'deletes':
                    var checkStatus = table.checkStatus('indent')
                        ,data = checkStatus.data; //得到选中的数据
                    // alert(data[1].empno);
                    if(data.length==0){
                        layer.msg('请先选择要删除的数据行！');
                        return ;
                    }
                    var empids = "";
                    for(var i=0;i<data.length;i++){
                        empids += data[i].id+",";
                    }
                    //截取最后一个，
                    empids=empids.substring(0,empids.length-1);
                    layer.confirm('真的要删除选中的用户信息吗？，将会删除所有用户有关信息', function(index){
                        //向服务端发送删除指令
                        $.ajax({
                            type: 'post',
                            url:"/employee/deletesEmployee",
                            data:{"empids":empids},
                            //定义回调想赢的数据格式为JSON字符串数组
                            dataType:"json",
                            success:function(obj){
                                if(obj > 0){
                                    layer.msg("删除成功",{icon:1,time:1000});
                                    table.reload('indent');
                                }
                            }
                        });
                    });
                    break;
                //添加
                case 'export':
                    insertUser();
                    break;
            };
        })
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            let event = obj.event;
            if (event === "viewReport"){
                // 处理你的业务逻辑
                EmployeeCar(data)
            }
            if(layEvent === 'del'){ //删除
                layer.confirm('真的要删除吗？', function(index){
                    //向服务端发送删除指令
                    $.ajax({
                        type: 'post',
                        url:"/employee/deleteEmployee?id="+data.id,
                        //定义回调想赢的数据格式为JSON字符串数组
                        dataType:"json",
                        success:function(data){
                            if(data > 0){
                                layer.msg('删除成功!',{icon:1,time:1500});
                                //重载表格
                                table.reload('indent');
                            }else{
                                layer.msg('离职失败！');
                            }
                        }
                    });
                });
            }else if(layEvent === 'update'){//修改
                updateCar(data);
            }
        });

        var mixIndex;
        //打开车辆信息页面
        function EmployeeCar(data){
            $("#carid").empty();
            mixIndex=layer.open({
                type:1,
                title:'车辆信息',
                content:$("#saveOrCarDiv"),
                area:['600px','500px'],
                success:function(index){
                    //清空表单数据
                    $.ajax({
                        type: 'post',
                        url:"/Car/selectCaremployeeid?id="+data.id,
                        //定义回调想赢的数据格式为JSON字符串数组
                        dataType:"json",
                        success:function(data){
                            if(data.length > 0){
                                for(var i=0;i<data.length;i++){
                                    $("#carid").append("<div class=\"layui-col-md6\">\n" +
                                        "                <div class=\"layui-card\">\n" +
                                        "                    <div class=\"layui-card-body\">\n" +
                                        "                        编号:"+data[i].id+"<br>\n" +
                                        "                        颜色:"+data[i].color+"<br>\n" +
                                        "                        品牌:"+data[i].name+"<br>\n" +
                                        "                    </div>\n" +
                                        "                </div>\n" +
                                        "            </div>");
                                }
                            }else{
                                $("#carid").append("<div class=\"layui-col-md12\">\n" +
                                    "                <div class=\"layui-card\">\n" +
                                    "                    <div style='color: red' class=\"layui-card-body\">\n" +
                                    "                        暂无车辆信息<br>\n" +
                                    "                    </div>\n" +
                                    "                </div>\n" +
                                    "            </div>")
                            }

                        }
                    });
                }
            });
        }
        //打开添加页面
        function insertUser(){
            $("#hidd").empty();
            mixIndex=layer.open({
                type:1,
                title:'添加用户信息',
                content:$("#saveOrUpdateDiv"),
                area:['600px','500px'],
                success:function(index){
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    url="/employee/insertEmployee";
                }
            });
        }
        //打开修改页面
        function updateCar(data){
            $("#hidd").empty().append('<input type="hidden" name="id">');
            mixIndex=layer.open({
                type:1,
                title:'修改用户信息',
                content:$("#saveOrUpdateDiv"),
                area:['600px','500px'],
                success:function(index){
                    //表单赋值
                    $("#add").prop("value",data.address.addid);
                    form.val("dataFrm",data);
                    url="/employee/updateEmployee";

                }
            });
        }
        //保存添加或修改的值
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var employee = $("#dataFrm").serialize();
            alert(employee);
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data:employee,
                success:function(data){
                    if(data==1){
                        layer.msg("添加成功",{icon:1,time:1000});
                        layer.close(mixIndex);
                        table.reload('indent');
                    }else if(data==2){
                        layer.msg("修改成功",{icon:1,time:1000});
                        layer.close(mixIndex);
                        table.reload('indent');
                    }
                }
            });
        });
    });
</script>
</body>
</html>